<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Spread Shout</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/media.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <style type="text/css">
            html .full-img{
                background: url(img/bg.jpg) no-repeat center center fixed;
                background-size: cover; 
            }
        </style>
    </head>
    <body id="profile">
        <!-- Modal registro -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <h3>Necesitamos que nos autorices a publicar novedades de <strong>Green Peace</strong> para llegar con nuestro mensaje a tus contactos.</h3>                                
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                            <p>El primer paso es vincular tu cuentas con nuestra herramienta:</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                            <button type="button" class="btn btn-primary btn-lg btn-block fb-login">Conectar con facebook</button>
                        </div>
                    </div>
                    <div class="row">
                        <br />
                        <div class="col-sm-8 col-sm-offset-2">
                            <button type="button" class="btn btn-primary btn-lg btn-block tw tw-login">Conectar con twitter</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                            <p class="small-text-login">Nos hacemos responsables por<br>el contenido publicado en tu perf&iacute;l</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <a data-toggle="modal" href="#myModalDos">Modal Dos</a>    
                        </div>
                    </div>
                </div>
                <!-- Fin modal contenido -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- Fin modal registro -->

        <!-- Modal  ceder tu espacio -->
        <div class="modal fade" id="myModalDos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <h3><strong>Listo!</strong><br>Ya contamos con tu voz en las redes</h3>                                
                        </div>
                    </div>
                    <form action="" method="" id="ceder-ss">
                        <div class="row">
                            <div class="col-sm-8 col-sm-offset-2">
                                <p>En caso de que quieras cambiar la frecuencia o agregar otra red social lo puedes hacer aquí mismo:</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8 col-sm-offset-2">
                                <ul>
                                    <li class="fb active">
                                        <h5>Facebook</h5>
                                        <a class="connect" href="#">Conectar con facebook</a>
                                        <div class="right">
                                            <i class="fa fa-clock-o left"></i>
                                            <div class="left dropdown">
                                                <div class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                                                    <div class="current">
                                                        <span>Daily</span><i class="fa fa-caret-down right"></i>
                                                    </div>
                                                </div>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                    <li><a href="#">Daily</a></li>
                                                    <li><a href="#">Weekly</a></li>
                                                    <li><a href="#">Monthly</a></li>
                                                    <li><a href="#">Inactive</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="tw">
                                        <h5>Twitter</h5>
                                        <a class="connect" href="#">Conectar con twitter</a>
                                        <div class="right">
                                            <i class="fa fa-clock-o left"></i>
                                            <div class="left dropdown">
                                                <div class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                                                    <div class="current">
                                                        <span>Daily</span><i class="fa fa-caret-down right"></i>
                                                    </div>
                                                </div>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                    <li><a href="#">Daily</a></li>
                                                    <li><a href="#">Weekly</a></li>
                                                    <li><a href="#">Monthly</a></li>
                                                    <li><a href="#">Inactive</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="gp">
                                        <h5>Google+</h5>
                                        <a class="connect" href="#">Conectar con google+</a>
                                        <div class="right">
                                            <i class="fa fa-clock-o left"></i>
                                            <div class="left dropdown">
                                                <div class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                                                    <div class="current">
                                                        <span>Daily</span><i class="fa fa-caret-down right"></i>
                                                    </div>
                                                </div>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                    <li><a href="#">Daily</a></li>
                                                    <li><a href="#">Weekly</a></li>
                                                    <li><a href="#">Monthly</a></li>
                                                    <li><a href="#">Inactive</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--<div class="row">
                            <div class="col-sm-8 col-sm-offset-2">
                                <p>y en cual de tus redes sociales</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-10 col-sm-offset-1">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-default">
                                        <input type="checkbox"> Facebook
                                    </label>
                                </div>
                            </div>
                        </div>-->
                        <div class="row">
                            <div class="col-sm-8 col-sm-offset-2">
                                <button type="submit" class="btn btn-lg ceder-btn">Guardar cambios</button>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                            <a href="#" class="small-text-login">Haz click aquí para conocer más sobre SpreadShout</a>
                        </div>
                    </div>
                </div>
                <!-- Fin modal contenido -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- Fin modal ceder tu espacio -->

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div class="full-img">
            <!-- FILTRO DE IMAGEN DE FONDO -->
            <div id="filter-img"></div>
            <!-- FIN FILTRO DE IMAGEN DE FONDO -->
            
            <!-- POWER BY -->
            <div id="power-by"><img src="img/powered-spread-shout.png" alt="" /></div>
            <!-- FIN POWER BY -->
            
            <!--LOG IN -->
            <!--
            <div class="log-in"><a data-toggle="modal" href="#loginModal">Log-in</a></div>
            -->
            <div class="settings right dropdown">
                <span class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                    <div class="current">
                         <img class="user-img" src="img/face.png" alt="" /><!-- <i class="fa fa-user"></i> -->Juan Perez<!--
                        --><i class="fa fa-caret-down m-left"></i>
                    </div>
                </span>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#">My <strong>Spread</strong>Shout</a></li>
                    <li><a href="#">Sign out</a></li>
                </ul>
            </div>
            <!--FIN LOG IN -->
            
            <div class="container">
                <div class="center-content">
                    <div class="row">
                        <div class="col-md-12"><div class="logo-brand"><img src="img/partido-red-logo.png" alt="" /></div></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2"><h1>Danos una mano para salvar a los Osos Polares</h1></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="cede-button">
                                <a data-toggle="modal" href="#myModal" class="btn btn-lg">Ced&eacute; tu espacio</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-4 sub-link">
                          <a href="tip" class="toggle-alert">¿De qu&eacute; se trata?</a> 
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-sm-6 col-sm-offset-3">
                       <div class="alert alert-warning">
                          <button type="button" class="close">&times;</button>
                          <p>Forma parte de <strong>Green Peace</strong> compartiendo nuestras novedades automaticamente.</p>
                          <p>Siguiendo adelante, nos darías permiso para publicar novedades relevantes en tu cuenta de Facebook o Twitter (una vez por día, semana o mes).</p>
                      </div>
                      </div>
                  </div>
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-4">
                            <div class="stats-wrapper">
                                <p class="followers-number">250.000</p>
                                <p class="seguidores-text"><strong>Seguidores</strong> ya <br /> cedieron su espacio</p>                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal LogIn -->
        <div class="modal fade home" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Log in</h3>
                    <p>Connect with a social network:</p>
                    <div class="logSocial">
                        <button class="fb">Facebook</button><button class="tw">Twitter</button>
                    </div>
                    <hr />
                    <p>Or log in with your email address:</p>
                    <form action="">
                        <fieldset>
                            <label for="email">Email</label><br />
                            <input type="text"  name="mail" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label><br />
                            <input type="password"  name="password"/>
                            <a class="small-text-login">Forgot your password?</a>
                        </fieldset>
                        <button>Go!</button>
                    </form>
                    <hr />
                    <p>Don't have an account yet? <a data-toggle="modal" href="#startModal">Get Started!</a></p>
                </div>
            </div>
        </div>

        <!-- Modal GetStarted -->
        <div class="modal fade home" id="startModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Get started!</h3>
                    <p>The first step is to create your <b>Spread</b>Shout user.<br />Connect with a social network:</p>
                    <div class="logSocial">
                        <button class="fb">Facebook</button><button class="tw">Twitter</button>
                    </div>
                    <hr />
                    <p>Or sign up using your <a data-toggle="modal" href="#emailModal">email address</a></p>
                </div>
            </div>
        </div>

        <!-- Modal GetStarted 2 -->
        <div class="modal fade home" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Get started!</h3>
                    <p>The first step is to create your <b>Spread</b>Shout user.</p>
                    <form action="">
                        <fieldset>
                        <label for="name">Full Name</label><br />
                        <input type="text"  name="name" />
                        </fieldset>
                        <fieldset>
                        <label for="email">Email</label><br />
                        <input type="text"  name="mail" />
                        </fieldset>
                        <fieldset>
                        <label for="password">Password</label><br />
                        <input type="password"  name="password"/>
                        </fieldset>
                        <fieldset>
                        <label for="password">Confirm Password</label><br />
                        <input type="password"  name="password"/>
                        </fieldset>
                        <fieldset>
                        <input type="checkbox" name="agreed" value="1"><p class="terms">I have read and agreed to the user <a href="">Terms & Agreements</a></p>
                        </fieldset>
                        <button>Go!</button>
                    </form>
                    <hr />
                </div>
            </div>
        </div>
        
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>
